<sidebar></sidebar>

<div id="page-content" ng-style="{'marginLeft': rootFields.marginSidebar}">
  <topbar></topbar>
  
  <breadcrumb></breadcrumb>

  <messages></messages>
  
  <div class="fadein" ng-show="rootFields.showContent">
    <div id="page-title" class="clearfix">
      <h1 class="pull-left">Application: {{name}}</h1>
      <div class="pull-right">
        <a class="action action-stop" ng-click="stopApplication()" ng-show="state == 'STARTED'" title="Stop"><i class="fa fa-lg fa-stop"></i></a>
        <a class="action action-play" ng-click="startApplication()" ng-show="state == 'STOPPED'" title="Start"><i class="fa fa-lg fa-play"></i></a>
        <a class="action action-refresh" ng-click="restartApplication()" ng-show="state == 'STARTED'" title="Restart"><i class="fa fa-lg fa-refresh"></i></a>
        <a class="action action-edit" ng-click="editApplication()"><i class="fa fa-lg fa-pencil" title="Edit"></i></a>
        <a class="action action-delete" ng-click="deleteApplication()"><i class="fa fa-lg fa-trash" title="Delete"></i></a>
      </div>
    </div><!-- /#page-title -->
    
    <div id="page-content-wrap" class="clearfix">
      
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">About</h3>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover">
              <tbody>
                <tr>
                  <th>Name</th>
                  <td>{{name}}</td>
                </tr>
                <tr>
                  <th>Status</th>
                  <td>
                    <div ng-if="state === 'STARTED'">
                      <span class="label label-success">{{state}}</span>
                    </div>
                    <div ng-if="state == 'STOPPED' || state == 'FAILED'">
                      <span class="label label-default">{{state}}</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>Last push</th>
                  <td>{{lastPush}}</td>
                </tr>
                <tr>
                  <th>Buildpack</th>
                  <td>{{buildPack}}</td>
                </tr>
                <tr>
                  <th>Stack</th>
                  <td>{{stack.entity.description}}</td>
                </tr>
                <tr>
                  <th>Disk limit</th>
                  <td>{{diskQuota}}</td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Configuration</h3>
            </div>
            <div class="panel-body">
              <form class="form-horizontal" role="form" name="formScaleApplication">
                <div class="form-group">
                  <label for="inputInstances" class="col-sm-3 control-label">Instances</label>
                  <div class="col-sm-9">
                    <input type="number" class="form-control" id="inputInstances" ng-model="scale.instances" required>
                  </div>
                </div>
  
                <div class="form-group">
                  <label for="inputMemory" class="col-sm-3 control-label">Memory (in MB)</label>
                  <div class="col-sm-9">
                    <input type="number" class="form-control" id="inputMemory" ng-model="scale.memory" required>
                  </div>
                </div>
  
                <div class="form-group">
                  <div class="col-sm-offset-3 col-sm-9">
                    <button class="btn btn-primary" ng-disabled="formScaleApplication.$invalid" ng-click="scaleApplication()">Scale</button>
                  </div>
                </div>
              </form>
            </div>
          </div><!-- /.panel -->
        </div>
      </div><!-- /.row -->
    
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Status</h3>
          </div>
          <div  class="table-responsive"><table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>Status</th>
                <th>CPU</th>
                <th>Memory</th>
                <th>Disk</th>
                <th>Uptime</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="instance in instances">
                <td>{{$index}}</td>
                <td><span class="label" ng-class="instance.state == 'RUNNING' ? 'label-success' : instance.state == 'CRASHED' ? 'label-danger' : 'label-default'">{{instance.state}}</span></td>
                <td>{{instance.stats.usage.cpu | number : 2}} %</td>
                <td>{{instance.stats.usage.mem / (1024*1024) | number : 0}} MB</td>
                <td>{{instance.stats.usage.disk / (1024*1024) | number : 0}} MB</td>
                <td>{{instance.stats.hours}} h {{instance.stats.minutes}} min</td>
              </tr>
            </tbody>
          </table></div>
        </div><!-- /.panel -->
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Events</h3>
          </div>
          <div  class="table-responsive"><table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Event</th>
                <th>Member</th>
                <th>Date time</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="event in appEvents">
                <td>{{event.entity.type}}</td>
                <td>{{event.entity.actor_name}}</td>
                <td>{{event.entity.timestamp | date:'dd/MM/yyyy @ HH:mm Z'}}</td>
              </tr>
            </tbody>
          </table></div>
        </div><!-- /.panel -->
      </div>
    </div><!-- /.row -->
    
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Services <span class="label label-default">{{nrOfServices}}</span></h3>
              <a class="btn btn-success pull-right" ng-click="addServiceBinding(services)"><i class="fa fa-plus"></i>&nbsp; Bind a service</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Service</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="service in services">
                  <td>
                    <span class="service-title">{{service.name}}</span>
                    <a ng-click="service.isCollapsed = !service.isCollapsed"><i class="fa fa-caret-right"></i> Show credentials</a>
                    <pre collapse="service.isCollapsed" class="service-credentials word-break">{{service.credentials}}</pre>
                  </td>
                  <td>
                    <a class="action" href="{{service.supportURL}}" target="_blank" title="Support"><i class="fa fa-lg fa fa-question" title="Support"></i></a>
                    <a class="action" href="{{service.docsURL}}" target="_blank" title="Docs"><i class="fa fa-lg fa fa-file"></i></a>
                    <a class="action" href="{{service.dashboard_url}}" target="_blank" title="Manage"><i class="fa fa-lg fa-cog"></i></a>
                    <a class="action action-delete" ng-click="deleteServiceBinding(service)" title="Unbind"><i class="fa fa-lg fa-chain-broken"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Routes <span class="label label-default">{{nrOfRoutes}}</span></h3>
              <a class="btn btn-success pull-right" ng-click="mapRoute()"><i class="fa fa-plus"></i>&nbsp; Map a route</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Route</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="route in routes">
                  <td><a href="http://{{route.host}}.{{route.domain.name}}" target="_blank">{{route.host}}.{{route.domain.name}}</a></td>
                  <td><a class="action action-delete" ng-click="unmapRoute(route)" title="Delete"><i class="fa fa-lg fa-trash"></i></a></td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
      </div><!-- /.row -->
    
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">User Environment variables <span class="label label-default">{{nrOfUserEnvVars}}</span></h3>
              <a class="btn btn-success pull-right" ng-click="addUserEnv()"><i class="fa fa-plus"></i>&nbsp; Add an environment variable</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Key</th>
                  <th>Value</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(usrEnVarKey, usrEnVarValue) in userEnvironmentVariables">
                  <td>{{usrEnVarKey}}</td>
                  <td>{{usrEnVarValue}}</td>
                  <td>
                    <a class="action action-edit" ng-click="editUserEnv(usrEnVarKey, usrEnVarValue)"><i class="fa fa-lg fa-pencil"></i></a>
                    <a class="action action-delete" ng-click="deleteUserEnv(usrEnVarKey)" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">System Environment variables</h3>
            </div>
            
            <pre class="panel-body">{{systemEnvironmentVariables | json}}</pre>
            
          </div><!-- /.panel -->
        </div>
      </div><!-- /.row -->
      
    </div><!-- /#page-content-wrap -->
  </div>
</div><!-- /#page-content -->